<template>
  <div>
    <!-- 轮播图 -->
    <div>
      <van-swipe
        class="my-swipe"
        :autoplay="3000"
        indicator-color="white"
        height="210"
      >
        <van-swipe-item v-for="item in lunbolist" :key="item.id"
          ><van-image
            width="375"
            height="220"
            :src="'http://liufusong.top:8080' + item.imgSrc"
        /></van-swipe-item>
      </van-swipe>
    </div>
    <!-- 轮播图 -->
    <!-- 搜索栏 -->
    <van-search
      background="rgba(0,0,0,0)"
      shape="round"
      class="sousuo"
      show-action
      placeholder="请输入小区或地址"
    >
      <template #label>
        <span @click="showcityList">{{city.label}}</span>
      </template>
      <template #left-icon>
        <span @click="showcityList"><van-icon name="arrow-down" /></span>
      </template>

      <template #action>
        <van-icon name="map-marked" color="rgb(249, 246, 246)" size="25" />
      </template>
    </van-search>
    <!-- 搜索栏 -->
    <!-- 页面导航 -->
    <div class="pagenav">
      <van-grid clickable :column-num="4" icon-size="38px">
        <van-grid-item icon="home-o" text="整租" to="/" />
        <van-grid-item icon="friends-o" text="合租" url="/vant/mobile.html" />
        <van-grid-item
          icon="map-marked"
          text="地图找房"
          url="/vant/mobile.html"
        />
        <van-grid-item icon="wap-home" text="去出租" url="/vant/mobile.html" />
      </van-grid>
    </div>
    <!-- 页面导航 -->
    <!-- 中间租房小组 -->
    <div class="zufang">
      <div class="zufangmsg">
        <h3>租房小组</h3>
        <span><a href="#">更多</a></span>
      </div>
      <van-grid direction="horizontal" :column-num="2" gutter="9">
        <van-grid-item v-for="item in homelist1" :key="item.id" icon="home-o">
          <template #icon>
            <van-image
              width="50"
              height="50"
              :src="'http://liufusong.top:8080' + item.imgSrc"
            />
          </template>
          <template #text>
            <div class="qwera">
              <span>{{ item.desc }}</span>
              <br />
              <span>{{ item.title }}</span>
            </div>
          </template>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 中间租房小组 -->
  </div>
</template>

<script>
import { home, homelist } from '@/api/HomePageajax'
export default {
  data() {
    return {
      lunbolist: [],
      homelist1: [],
      city: JSON.parse(window.localStorage.getItem('city')) || {
        label: '上海',
        value: 'AREA|dbf46d32-7e76-1196',
        pinyin: 'shanghai',
        short: 'sh'
      }
    }
  },
  methods: {
    showcityList() {
      this.$router.push('/citylist')
    }
  },
  async created() {
    const res = await home()
    this.lunbolist = res.body
    const res1 = await homelist()
    this.homelist1 = res1.body
  }
}
</script>

<style scoped lang="less">
// 轮播图
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 25px;
  line-height: 50px;
  text-align: center;
  background-color: #39a9ed;
}
// 搜索
.sousuo {
  position: fixed;
  top: 10px;
  margin-left: 40px;
  height: 40px;
}
// 租房小组
.zufang {
  width: 100%;
  height: 200px;
  background-color: rgb(249, 246, 246);
}
.zufangmsg {
  height: 40px;
  width: 100%;
}
.zufangmsg span a {
  position: fixed;
  right: 20px;
  top: 320px;
  color: #5f5c5c;
  font-size: 15px;
}
.zufangmsg h3 {
  position: fixed;
  left: 10px;
  top: 320px;
  color: #2c2b2b;
  font-size: 15px;
}
::v-deep .van-grid-item__content--clickable {
  color: #21b97a !important;
}
.van-search__action {
  position: fixed;
  top: 17px;
  right: 19px;
}
.qwera span {
  font-size: 14px;
  color: #333333;
}
</style>
